import React, { useState } from 'react';
import styled from 'styled-components';

const NavWrapper = styled.div`
  width: 95%;
  margin: 0 auto;
  height: 50px;
  background: #ccc;
  display: flex;
  .left {
    flex: 1;
    display:flex;
    justify-content: center;
    align-items:center
  }
  .right {
    flex:1;
    display:flex;
    justify-content: center;
    align-items:center
  }
`

export const NavBar: React.FC = () => {
  const [city, setCity] = useState({ a: '北京', b: '上海' })
  return <NavWrapper>
    <div className="left">{city.a}</div>
    <div className="mid" onClick={() => {
      setCity({
        a: city.b,
        b: city.a
      })
    }}> 💇 </div>
    <div className="right">{city.b}</div>
  </NavWrapper>
}

export default NavBar;